<template>
  <van-form @submit="onSubmit">
    <van-field
        v-model="team.name"
        name="队伍名"
        label="队伍名"
        placeholder="请输入队伍名"
        :rules="[{ required: true, message: '请填写队伍名' }]"
    />
    <van-field
        v-model="team.description"
        type="textarea"
        name="队伍描述"
        label="队伍描述"
        placeholder="请输入队伍描述"
    />
    <van-field
        v-model="team.expireTime"
        is-link
        readonly
        name="过期时间"
        label="过期时间"
        placeholder="点击选择过期时间"
        @click="showPicker = true"
    />
    <van-popup v-model:show="showPicker" position="bottom">
      <van-date-picker
          :minDate="minDate"
          @confirm="doConfirm"
          @cancel="showPicker = false"/>
    </van-popup>
    <van-field
        name="最大人数"
        label="最大人数">
      <template #input>
        <van-stepper
            v-model="team.maxNum"
            :max="10"
        />
      </template>
    </van-field>
    <van-field name="队伍状态" label="队伍状态">
      <template #input>
        <van-radio-group v-model="team.status" direction="horizontal">
          <van-radio :name=0>公开</van-radio>
          <van-radio :name=1>私有</van-radio>
          <van-radio :name=2>加密</van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field
        v-if="team.status === 2"
        v-model="team.password"
        name="密码"
        label="密码"
        type="password"
        placeholder="请输入四位密码"
        :rules="[{ required: true, message: '请填写密码' }]"
    />
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {TeamSearchByCondition, UpdateTeam} from "../../services/api.ts";
import {showFailToast, showSuccessToast, showToast} from "vant";
import {useRouter, useRoute} from "vue-router";

const router = useRouter();
const showPicker = ref(false);
const route = useRoute();
const team = ref<API.TeamSearchResponse>({})
const id = ref<number>(route.params.id)

onMounted(async () => {
  // console.log(id.value)
  const res = await TeamSearchByCondition({
    params: {
      id: id.value,
    }
  })
  if (res.code === 0) {
    team.value = res.data.records[0]
    team.value.status = mapStatus2Number(res.data.records[0].status)
    console.log(team.value.status)
  } else {
    showToast(res.description)
  }
})


const minDate = new Date(2024, 9, 19)


const doConfirm = ({selectedOptions}) => {

  team.value.expireTime = selectedOptions[0]?.text +
      "-" + selectedOptions[1]?.text
      + "-" + selectedOptions[2]?.text
      + " 00:00:00";
  showPicker.value = !showPicker.value
}
const onSubmit = async () => {

  const res = await UpdateTeam({
    ...(team.value || {})
  })
  if (res.code == 0) {
    showSuccessToast("修改成功")
    router.back()
  } else {
    showFailToast(res.description)
  }
}


const mapStatus2Number = (val: string) => {
  if ("PIBLIC" === val) {
    return 0;
  } else if ("PRIVATE" === val) {
    return 1;
  } else {
    return 2;
  }
}
</script>

<style scoped>

</style>